<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>网格组件</title>
  <link rel="stylesheet" href="../src/hans-ui.css">
</head>
<body>
  <div class="tt-content">
    <!-- 九宫格 -->
    <div class="tt-grid tt-grid-4">
      <div class="tt-grid-item">
        <i class="fa fa-area-chart tt-grid-icon"></i>
        <p class="tt-grid-label">格子1</p>
      </div>
      <div class="tt-grid-item">
        <i class="fa fa-area-chart tt-grid-icon"></i>
        <p class="tt-grid-label">格子2</p>
      </div>
      <div class="tt-grid-item">
        <i class="fa fa-area-chart tt-grid-icon"></i>
        <p class="tt-grid-label">格子3</p>
      </div>
      <div class="tt-grid-item">
        <i class="fa fa-area-chart tt-grid-icon"></i>
        <p class="tt-grid-label">格子4</p>
      </div>
      <div class="tt-grid-item">
        <i class="fa fa-area-chart tt-grid-icon"></i>
        <p class="tt-grid-label">格子5</p>
      </div>
      <div class="tt-grid-item">
        <i class="fa fa-area-chart tt-grid-icon"></i>
        <p class="tt-grid-label">格子6</p>
      </div>
      <div class="tt-grid-item">
        <i class="fa fa-area-chart tt-grid-icon"></i>
        <p class="tt-grid-label">格子7</p>
      </div>
      <div class="tt-grid-item">
        <i class="fa fa-area-chart tt-grid-icon"></i>
        <p class="tt-grid-label">格子8</p>
      </div>
      <div class="tt-grid-item">
        <i class="fa fa-area-chart tt-grid-icon"></i>
        <p class="tt-grid-label">格子9</p>
      </div>
      <div class="tt-grid-item">
        <i class="fa fa-area-chart tt-grid-icon"></i>
        <p class="tt-grid-label">格子10</p>
      </div>
      <div class="tt-grid-item">
        <i class="fa fa-area-chart tt-grid-icon"></i>
        <p class="tt-grid-label">格子11</p>
      </div>
      <div class="tt-grid-item">
        <i class="fa fa-area-chart tt-grid-icon"></i>
        <p class="tt-grid-label">格子12</p>
      </div>
      <div class="tt-grid-item">
        <i class="fa fa-area-chart tt-grid-icon"></i>
        <p class="tt-grid-label">格子13</p>
      </div>
      <div class="tt-grid-item">
        <i class="fa fa-area-chart tt-grid-icon"></i>
        <p class="tt-grid-label">格子14</p>
      </div>
      <div class="tt-grid-item">
        <i class="fa fa-area-chart tt-grid-icon"></i>
        <p class="tt-grid-label">格子15</p>
      </div>
      <div class="tt-grid-item">
        <i class="fa fa-area-chart tt-grid-icon"></i>
        <p class="tt-grid-label">格子16</p>
      </div>
    </div>
    <br>
    <!-- 多列网格 -->
    <div class="tt-grid">

    </div>
  </div>
</body>
</html>